<?php /* Smarty version Smarty-3.0.6, created on 2025-08-14 15:22:09
         compiled from "D:\wwwroot\gushi-v2/tpl\v2/gushiList.html" */ ?>
<?php /*%%SmartyHeaderCode:245689d8ea1cc81a7-76985567%%*/if(!defined('SMARTY_DIR')) exit('no direct access allowed');
$_smarty_tpl->decodeProperties(array (
  'file_dependency' => 
  array (
    'f82e4515a92c116560b9e0d43fcb6a95577b54fe' => 
    array (
      0 => 'D:\\wwwroot\\gushi-v2/tpl\\v2/gushiList.html',
      1 => 1755156102,
      2 => 'file',
    ),
  ),
  'nocache_hash' => '245689d8ea1cc81a7-76985567',
  'function' => 
  array (
  ),
  'has_nocache_code' => false,
)); /*/%%SmartyHeaderCode%%*/?>
<?php $_template = new Smarty_Internal_Template("v2/header.html", $_smarty_tpl->smarty, $_smarty_tpl, $_smarty_tpl->cache_id, $_smarty_tpl->compile_id, null, null);
 echo $_template->getRenderedTemplate();?><?php $_template->updateParentVariables(0);?><?php unset($_template);?>
<main class="pt-24 pb-16">
    <!-- 页面标题 -->
    <section class="container mx-auto px-4 mb-12">
        <div class="flex flex-col md:flex-row md:items-end justify-between">
            <div>
                <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-song font-bold mb-2">诗境</h1>
                <p class="text-lightink max-w-2xl">探索古典诗词的意境之美，感受千年文字的力量与温度</p>
            </div>
            <div class="mt-4 md:mt-0">
                <div class="relative">
                    <input type="text" placeholder="搜索诗词或作者..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-cinnabar focus:border-transparent w-full md:w-64">
                    <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-lightink"></i>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 筛选区 -->
    <section class="container mx-auto px-4 mb-10 scroll-reveal">
        <div class="bg-paper p-6 rounded-xl shadow-sm">
            <!-- 朝代筛选 -->
            <div class="mb-6">
                <h3 class="font-song font-bold mb-3 text-lg">朝代</h3>
                <div class="flex flex-wrap gap-2">
                    <button class="filter-tag-active px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="all">全部</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="先秦">先秦</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="两汉">两汉</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="魏晋">魏晋</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="南北朝">南北朝</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="隋代">隋代</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="唐代">唐代</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="宋代">宋代</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="金朝">金朝</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="元代">元代</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="明代">明代</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="清代">清代</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="近代">近代</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="dynasty" data-value="现代">现代</button>
                </div>
            </div>
            
            <!-- 主题筛选 -->
            <div class="mb-6">
                <h3 class="font-song font-bold mb-3 text-lg">主题</h3>
                <div class="flex flex-wrap gap-2">
                    <button class="filter-tag-active px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="all">全部</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="唐诗">唐诗</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="宋词">宋词</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="小学">小学</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="中学">中学</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="高中">高中</button>                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="爱情">爱情</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="春天">春天</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="夏天">夏天</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="秋天">秋天</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="冬天">冬天</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="田园">田园</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="咏物">咏物</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="抒情">抒情</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="边塞">边塞</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="离别">离别</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="写景">写景</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="theme" data-value="咏史">咏史</button>






                </div>
            </div>
            
            <!-- 体裁筛选 -->
            <div>
                <h3 class="font-song font-bold mb-3 text-lg">体裁</h3>
                <div class="flex flex-wrap gap-2">
                    <button class="filter-tag-active px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="form" data-value="all">全部</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="form" data-value="五言绝句">五言绝句</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="form" data-value="七言绝句">七言绝句</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="form" data-value="五言律诗">五言律诗</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="form" data-value="七言律诗">七言律诗</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="form" data-value="词">词</button>
                    <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300" data-type="form" data-value="曲">曲</button>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 热门诗人 -->
    <section class="container mx-auto px-4 mb-16 scroll-reveal">
        <h2 class="text-2xl font-song font-bold mb-6">热门诗人</h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
            <!-- 诗人1 -->
            <a href="poet-detail.html" class="text-center group scroll-reveal">
                <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                    <img src="//p1.renbenzhihui.com/upload/2025_33/e8a9da84e31af05.png" alt="李白头像" class="w-full h-full object-cover">
                </div>
                <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">李白</h3>
                <p class="text-xs text-rice/70">唐代</p>
            </a>
            
            <!-- 诗人2 -->
            <a href="poet-detail.html" class="text-center group scroll-reveal">
                <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                    <img src="//p1.renbenzhihui.com/upload/2025_33/2bee5b62e67727d.png" alt="杜甫头像" class="w-full h-full object-cover">
                </div>
                <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">杜甫</h3>
                <p class="text-xs text-rice/70">唐代</p>
            </a>
            
            <!-- 诗人3 -->
            <a href="poet-detail.html" class="text-center group scroll-reveal">
                <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                    <img src="//p1.renbenzhihui.com/upload/2025_33/d39f415bee6a004.png" alt="白居易头像" class="w-full h-full object-cover">
                </div>
                <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">白居易</h3>
                <p class="text-xs text-rice/70">唐代</p>
            </a>
            
            <!-- 诗人4 -->
            <a href="poet-detail.html" class="text-center group scroll-reveal">
                <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                    <img src="//p1.renbenzhihui.com/upload/2025_33/ef12383329c04bd.png" alt="苏轼头像" class="w-full h-full object-cover">
                </div>
                <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">苏轼</h3>
                <p class="text-xs text-rice/70">宋代</p>
            </a>
            
            <!-- 诗人5 -->
            <a href="poet-detail.html" class="text-center group scroll-reveal">
                <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                    <img src="//p1.renbenzhihui.com/upload/2025_33/410b24ac26a66ad.png" alt="李清照头像" class="w-full h-full object-cover">
                </div>
                <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">李清照</h3>
                <p class="text-xs text-rice/70">宋代</p>
            </a>
            
            <!-- 诗人6 -->
            <a href="poet-detail.html" class="text-center group scroll-reveal">
                <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                    <img src="//p1.renbenzhihui.com/upload/2025_33/757b7069cd5e2b4.png" alt="王维头像" class="w-full h-full object-cover">
                </div>
                <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">王维</h3>
                <p class="text-xs text-rice/70">唐代</p>
            </a>
        </div>
    </section>
    
    <!-- 诗词列表 -->
    <section class="container mx-auto px-4">
        <h2 class="text-2xl font-song font-bold mb-6 scroll-reveal">诗词精选</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="poetry-list">
            <!-- 诗词将通过JavaScript动态加载到这里 -->
            <div class="col-span-full text-center py-12">
                <i class="fa fa-spinner fa-spin text-2xl text-cinnabar mb-4"></i>
                <p>加载中...</p>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="text-center mt-12 scroll-reveal">
            <button id="load-more" class="border-2 border-ink text-ink px-8 py-3 rounded-full hover:bg-ink hover:text-rice transition-all duration-300 font-song">
                加载更多 <i class="fa fa-refresh ml-2"></i>
            </button>
        </div>
    </section>
</main>
<script>
    // 筛选条件
    const filters = {
        dynasty: 'all',
        theme: 'all',
        form: 'all',
        page: 1,
        limit: 6
    };
    
    // 筛选标签切换
    $('.filter-tag-active, .bg-rice.hover\\:bg-gray-200').click(function() {
        const type = $(this).data('type');
        const value = $(this).data('value');
        
        // 更新筛选条件
        filters[type] = value;
        filters.page = 1; // 重置页码
        
        // 更新UI状态
        const siblings = $(this).siblings();
        $(this).removeClass('bg-rice hover:bg-gray-200').addClass('filter-tag-active');
        siblings.removeClass('filter-tag-active').addClass('bg-rice hover:bg-gray-200');
        
        // 重新加载数据
        loadPoetryList(true);
    });
    
    // 加载诗词列表
    function loadPoetryList(clearExisting = false) {
        // 显示加载状态
        const $poetryList = $('#poetry-list');
        if (clearExisting) {
            $poetryList.html('<div class="col-span-full text-center py-12"><i class="fa fa-spinner fa-spin text-2xl text-cinnabar mb-4"></i><p>加载中...</p></div>');
        } else {
            $('#load-more').html('<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...');
        }
        
        // 构建请求URL
        let url = `index.php?c=main&a=getGuShiList`;
        Object.keys(filters).forEach(key => {
            url += `&${key}=${encodeURIComponent(filters[key])}`;
        });
        
        // 发送请求
        $.getJSON(url)
            .done(data => {
                if (data.data && data.data.length > 0) {
                    if (clearExisting) {
                        $poetryList.empty();
                    }
                    
                    // 渲染诗词列表
                    data.data.forEach((poem, index) => {
                        // 计算延迟时间，实现渐入效果
                        const delay = (index % 3) * 0.1 + 0.1;
                        
                        // 创建诗词卡片
                        const poemCard = `
                            <a href="index.php?c=main&a=gsDetails&id=${poem.id}" class="bg-paper rounded-xl overflow-hidden shadow-sm poem-card-hover scroll-reveal" style="transition-delay: ${delay}s">

                                <div class="relative h-52 overflow-hidden">
                                    <img src="${poem.image || `https://picsum.photos/id/${29 + index}/600/400`}" alt="${poem.title}场景图" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                    <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">${poem.dynasty}<!--·${poem.form}--></div>
                                </div>
                                <div class="p-6">
                                    <h3 class="text-xl font-song font-bold mb-2">${poem.title}</h3>
                                    <p class="text-lightink text-sm mb-4">${poem.author}</p>
                                    <p class="font-kai text-ink/80 mb-4">${poem.content.substring(0, 50)}${poem.content.length > 50 ? '...' : ''}</p>
                                    <div class="flex justify-between items-center">
                                        <div class="flex space-x-3">
                                            <span class="text-lightink text-sm"><i class="fa fa-eye mr-1"></i> ${poem.views}</span>
                                            <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> ${poem.likes}</span>
                                        </div>
                                        <button class="text-cinnabar hover:text-cinnabar/80 transition-colors">
                                            查看详情 <i class="fa fa-angle-right ml-1"></i>
                                        </button>
                                    </div>
                                </div>
                            </a>
                        `;
                        
                        $poetryList.append(poemCard);
                    });
                    
                    // 恢复加载更多按钮状态
                    $('#load-more').html('加载更多 <i class="fa fa-refresh ml-2"></i>');
                    
                    // 如果没有更多数据，隐藏加载更多按钮
                    if (data.data.length < filters.limit) {
                        $('#load-more').hide();
                    } else {
                        $('#load-more').show();
                    }
                } else {
                    // 没有数据
                    if (clearExisting) {
                        $poetryList.html('<div class="col-span-full text-center py-12"><p>没有找到符合条件的诗词</p></div>');
                    } else {
                        $('#load-more').html('没有更多内容了').prop('disabled', true);
                    }
                }
            })
            .fail(error => {
                console.error('加载诗词失败:', error);
                if (clearExisting) {
                    $poetryList.html('<div class="col-span-full text-center py-12"><p>加载失败，请重试</p></div>');
                } else {
                    $('#load-more').html('加载失败，重试');
                }
            });
    }
    
    // 加载更多功能
    $('#load-more').click(function() {
        filters.page++;
        loadPoetryList(false);
    });
    
    // 搜索功能
    $('input[placeholder="搜索诗词或作者..."]').on('keypress', function(e) {
        if (e.which === 13) { // 回车键
            const keyword = $(this).val().trim();
            // 这里可以添加搜索逻辑
            if (keyword) {
                filters.keyword = keyword;
                filters.page = 1;
                loadPoetryList(true);
            }
        }
    });
    
    // 页面加载完成后初始化
    $(document).ready(function() {
        // 触发一次滚动事件，初始化导航栏状态
        $(window).trigger('scroll');
        
        // 加载诗词列表
        loadPoetryList(true);
    });
</script>
<?php $_template = new Smarty_Internal_Template("v2/footer.html", $_smarty_tpl->smarty, $_smarty_tpl, $_smarty_tpl->cache_id, $_smarty_tpl->compile_id, null, null);
 echo $_template->getRenderedTemplate();?><?php $_template->updateParentVariables(0);?><?php unset($_template);?>